import { useState, useRef } from 'react';
import { Button, ScrollView, Text, View, StyleSheet, TextInput } from 'react-native';
import { Path, Stop, LinearGradient } from 'react-native-svg';
import { LineChart } from 'react-native-gifted-charts';
import { CurveType } from 'gifted-charts-core'
import { TestCase, TestSuite, Tester } from "@rnoh/testerino";
import { axesProps, commonPointerProps } from "../commonProps";

export default function () {
  const scrollref = useRef();
  const [lineData, setLineData] = useState([{ value: 50, label: '50' }, { value: 80, label: '80' }, { value: 90, label: '90' }, { value: 70, label: '70' }]);

  const LineChartProps = [
    {
      dataPointLabelWidth: 20,
      data: [
        {
          value: 50,
          dataPointText: '50',
          dataPointLabelWidth: 10, dataPointLabelShiftX: 10, dataPointLabelShiftY: 10
        },
        { value: 80, dataPointText: '80' },
        { value: 90, dataPointText: '90' },
        { value: 70, dataPointText: '70' }]
    },
    {
      dataPointLabelWidth: 50,
      data: [{
        value: 50,
        dataPointText: '50',
      },
      {
        value: 80,
        dataPointText: '80',
      },
      { value: 90, dataPointText: '90' },
      { value: 70, dataPointText: '70' }]
    },
    {
      dataPointLabelShiftX: 10,
      data: [
        {
          value: 50, dataPointText: '50',
        },
        { value: 80, dataPointText: '80' },
        { value: 90, dataPointText: '90' },
        { value: 70, dataPointText: '70' }]
    },
    {
      dataPointLabelShiftX: 20,
      data: [
        {
          value: 50, dataPointText: '50',
        },
        { value: 80, dataPointText: '80' },
        { value: 90, dataPointText: '90' },
        { value: 70, dataPointText: '70' }]
    },
    {
      dataPointLabelShiftY: 10,
      data: [
        {
          value: 50, dataPointText: '50',
        },
        { value: 80, dataPointText: '80' },
        { value: 90, dataPointText: '90' },
        { value: 70, dataPointText: '70' }]
    },
    {
      dataPointLabelShiftY: 20,
      data: [
        {
          value: 50, dataPointText: '50',
        },
        { value: 80, dataPointText: '80' },
        { value: 90, dataPointText: '90' },
        { value: 70, dataPointText: '70' }]
    },
  ]

  const [selectedIndex, setSelectedIndex] = useState(null)
  const [searchValue, setSearchValue] = useState('')
  const [layoutList, setLayoutList] = useState(LineChartProps)

  const handleSearch = (value) => {
    const index = LineChartProps.findIndex(item => JSON.stringify(item).includes(value))
    setSelectedIndex(null)
    if(index !== -1) {
      setLayoutList(LineChartProps.filter(item => JSON.stringify(item).includes(value)))
    } else {
      alert('未找到匹配的图表')
      setLayoutList(LineChartProps)
    }
  }

  return (
    <Tester>
      <View style={styles.serachContainer}>
        <TextInput 
          style={styles.searchInput}
          placeholder='筛选图表属性'
          value={searchValue}
          onChangeText={setSearchValue}
          onSubmitEditing={() => handleSearch(searchValue.replaceAll(`"`,`'`))}
        />
      </View>
      <ScrollView>
        {
          layoutList.map((item,index) => {
            return (
              <TestCase key={JSON.stringify(item)} itShould={JSON.stringify(item)} tags={['C_API']}>
                {item.disableScroll ? <Text>disableScroll:true时禁止左右图表滑动</Text> : null}
                {item.focusEnabled ? <Text>请点击图形上显示的数据点，观察效果</Text> : null}
                {selectedIndex === index?
                  <LineChart scrollRef={scrollref} data={lineData} {...item}></LineChart>
                  : (<Button title='点击显示图表' onPress={() => setSelectedIndex(index)} />)
                }
              </TestCase>
            )
          })
        }

      </ScrollView>
    </Tester>
  )
}

const styles = StyleSheet.create({
  serachContainer: {
    padding: 10,
    backgroundColor: '#f5f5f5'
  },
  searchInput: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10
  }
})